import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { AntDesign, Entypo } from '@expo/vector-icons';
import AsyncStorage from '@react-native-async-storage/async-storage';


export default function Game_stop ({ navigation,route }) {
    const {board,errorCount,solution,time}=route.params;
    const saveGame=async()=>{
        try{
            const gameState = {
                board: board,
                errorCount: errorCount,
                solution:solution
            };
            await AsyncStorage.setItem('gameState',JSON.stringify(gameState));
            await AsyncStorage.setItem('time',JSON.stringify(time));
            navigation.navigate("Home");
        }catch(error){
            console.error("Error saving game:",error);
        }
    }

    const backGame=async()=>{
        try{
            const gameState = {
                board: board,
                errorCount: errorCount,
                solution:solution
            };
            await AsyncStorage.setItem('gameState',JSON.stringify(gameState));
            await AsyncStorage.setItem('time',JSON.stringify(time));
            navigation.navigate("Game_main", { loadSavedGame: true });
        }catch(error){
            console.error("Erroe backing game:",error);
        }
    }


    return (
        <View style={styles.container}>
            <View style={styles.buttonContainer}>
                <TouchableOpacity 
                    style={styles.buttonWithIcon}
                    onPress={backGame}
                >
                    <AntDesign name="caretright" size={25} color="black" />
                    <Text style={styles.buttonText}>继续游戏</Text>
                </TouchableOpacity>
                <TouchableOpacity 
                    style={styles.buttonWithIcon}
                    onPress={saveGame}
                >
                    <Entypo name="save" size={25} color="black" />
                    <Text style={styles.buttonText}>保存并退出</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
    },
    buttonContainer: {
        width: "100%",
        alignItems: "center",
    },
    buttonWithIcon: {
        flexDirection: "row", 
        alignItems: "center", 
        borderWidth: 2, 
        borderColor: "#000", 
        backgroundColor: "#ADD8E6",
        borderRadius: 8, 
        padding: 15, 
        marginVertical: 10, 
        justifyContent: "center",
        width: "80%", 
    },
    buttonText: {
        fontSize: 18,
        color: "#000",
        fontWeight: "bold",
    },
});